<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代化部署流程指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            overflow-x: auto;
        }
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        .mermaid {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight">
                <i class="fas fa-rocket mr-4"></i>现代化部署流程指南
            </h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90 max-w-3xl mx-auto leading-relaxed">
                从开发到生产的完整部署策略，构建高效、可靠、自动化的应用交付管道
            </p>
            <div class="flex justify-center space-x-8 text-lg">
                <div><i class="fas fa-cogs mr-2"></i>自动化构建</div>
                <div><i class="fas fa-sync-alt mr-2"></i>持续交付</div>
                <div><i class="fas fa-shield-alt mr-2"></i>稳定运维</div>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 px-6 bg-white">
        <div class="max-w-4xl mx-auto">
            <p class="text-lg leading-relaxed text-gray-700">
                <span class="drop-cap">在</span>实际项目中，部署是将应用程序从开发环境迁移到生产环境的过程。这个过程通常包括多个阶段，从构建、测试到发布和运维。一个高效、可靠的部署流程是确保应用程序稳定运行和快速迭代的关键。
            </p>
        </div>
    </section>

    <!-- Deployment Flow Visualization -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 relative inline-block section-title">部署流程全景图</h2>
            <div class="mermaid">
                graph LR
                    A[代码提交] --> B[持续集成 CI]
                    B --> C[自动化测试]
                    C --> D[构建镜像]
                    D --> E[持续交付 CD]
                    E --> F{部署策略}
                    F --> G[滚动部署]
                    F --> H[蓝绿部署]
                    F --> I[金丝雀发布]
                    G --> J[生产环境]
                    H --> J
                    I --> J
                    J --> K[监控告警]
                    K --> L[故障恢复]
                    L --> M[回滚机制]
                    
                    style A fill:#667eea,stroke:#fff,color:#fff
                    style J fill:#764ba2,stroke:#fff,color:#fff
                    style K fill:#f59e0b,stroke:#fff,color:#fff
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            
            <!-- 1. 构建与集成 -->
            <section class="mb-16">
                <h2 class="text-4xl font-bold mb-8 text-gray-800 flex items-center">
                    <i class="fas fa-layer-group feature-icon mr-4"></i>
                    1. 构建与集成
                </h2>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <!-- CI Card -->
                    <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800">
                            <i class="fas fa-infinity text-blue-500 mr-2"></i>持续集成（CI）
                        </h3>
                        <ul class="space-y-3 text-gray-600 mb-6">
                            <li><i class="fas fa-check-circle text-green-500 mr-2"></i><strong>自动化构建</strong>：使用工具（如 Jenkins、GitLab CI、GitHub Actions）自动化构建过程，确保每次提交代码都能生成可部署的构件。</li>
                            <li><i class="fas fa-check-circle text-green-500 mr-2"></i><strong>单元测试</strong>：在构建过程中执行单元测试，以验证代码的正确性。失败的测试会阻止构建进程，以保证只发布通过测试的代码。</li>
                        </ul>
                        
                        <div class="mt-6">
                            <p class="text-sm font-semibold text-gray-700 mb-2">示例配置（Jenkins Pipeline）：</p>
                            <pre class="code-block p-4 text-sm overflow-x-auto"><code>pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                sh 'mvn clean package'
            }
        }
        stage('Test') {
            steps {
                sh 'mvn test'
            }
        }
    }
}</code></pre>
                        </div>
                    </div>
                    
                    <!-- CD Card -->
                    <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800">
                            <i class="fas fa-shipping-fast text-purple-500 mr-2"></i>持续交付（CD）
                        </h3>
                        <ul class="space-y-3 text-gray-600">
                            <li><i class="fas fa-check-circle text-green-500 mr-2"></i><strong>自动化部署</strong>：将构建好的应用自动部署到测试环境或生产环境。工具如 Jenkins、Argo CD、GitOps 等可以实现这一功能。</li>
                            <li><i class="fas fa-check-circle text-green-500 mr-2"></i><strong>环境隔离</strong>：为不同的环境（开发、测试、生产）配置不同的部署流程和配置，确保部署的稳定性。</li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 2. 发布策略 -->
            <section class="mb-16">
                <h2 class="text-4xl font-bold mb-8 text-gray-800 flex items-center">
                    <i class="fas fa-route feature-icon mr-4"></i>
                    2. 发布策略
                </h2>
                
                <div class="bg-white rounded-xl shadow-lg p-8">
                    <div class="grid md:grid-cols-2 gap-8 mb-8">
                        <div>
                            <h3 class="text-2xl font-semibold mb-4 text-gray-800">
                                <i class="fas fa-code-branch text-indigo-500 mr-2"></i>版本管理
                            </h3>
                            <p class="text-gray-600">
                                <strong>版本控制</strong>：使用版本控制系统（如 Git）管理应用版本。遵循语义版本控制原则（SemVer）来标记版本号，确保版本的一致性和可追溯性。
                            </p>
                        </div>
                        
                        <div>
                            <h3 class="text-2xl font-semibold mb-4 text-gray-800">
                                <i class="fas fa-rocket text-pink-500 mr-2"></i>部署模式
                            </h3>
                        </div>
                    </div>
                    
                    <!-- Deployment Strategies -->
                    <div class="grid md:grid-cols-3 gap-6">
                        <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 text-blue-800">
                                <i class="fas fa-sync-alt mr-2"></i>滚动部署
                            </h4>
                            <p class="text-gray-700 text-sm">逐步更新服务实例，以最小化服务中断。这种方法在大多数现代应用中很常见。</p>
                        </div>
                        
                        <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 text-green-800">
                                <i class="fas fa-palette mr-2"></i>蓝绿部署
                            </h4>
                            <p class="text-gray-700 text-sm">同时运行两个环境（蓝色和绿色），在一个环境中进行部署和测试，确保新版本正常后，将流量切换到新环境。</p>
                        </div>
                        
                        <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 p-6 rounded-lg">
                            <h4 class="font-semibold text-lg mb-2 text-yellow-800">
                                <i class="fas fa-dove mr-2"></i>金丝雀发布
                            </h4>
                            <p class="text-gray-700 text-sm">将新版本发布给部分用户，逐步扩大覆盖范围，监控反馈后决定是否全量发布。</p>
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <p class="text-sm font-semibold text-gray-700 mb-2">蓝绿部署示例：</p>
                        <pre class="code-block p-4 text-sm overflow-x-auto"><code># Kubernetes Deployment YAML for blue-green deployment
apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-app-green
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-app
      color: green
  template:
    metadata:
      labels:
        app: my-app
        color: green
    spec:
      containers:
      - name: my-app
        image: my-app:green</code></pre>
                    </div>
                </div>
            </section>

            <!-- 3. 配置管理 -->
            <section class="mb-16">
                <h2 class="text-4xl font-bold mb-8 text-gray-800 flex items-center">
                    <i class="fas fa-cog feature-icon mr-4"></i>
                    3. 配置管理
                </h2>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800">
                            <i class="fas fa-file-alt text-teal-500 mr-2"></i>配置文件管理
                        </h3>
                        <ul class="space-y-3 text-gray-600">
                            <li><i class="fas fa-database text-teal-400 mr-2"></i><strong>配置中心</strong>：使用配置管理工具（如 Spring Cloud Config、Consul、etcd）集中管理应用配置。支持动态配置更新和版本控制。</li>
                            <li><i class="fas fa-terminal text-teal-400 mr-2"></i><strong>环境变量</strong>：在不同环境中使用环境变量来覆盖配置文件中的设置，提高配置的灵活性和安全性。</li>
                        </ul>
                    